<template>
  <div class="monitor-box">
    <CardBox title="观测站简介"> </CardBox>
    <div class="content-container">
      <div class="monitor-total">
        <div
          class="monitor-total-item"
          v-for="item in monitorTotal"
          :key="item.title"
        >
          <div class="monitor-total-item-content">
            <div class="monitor-total-item-title">{{ item.title }}</div>
            <div class="monitor-total-item-num fonts-DIN">
              {{ item.num }}<span class="monitor-total-item-num-unit">{{ item.unit }}</span>
            </div>
            <img
              class="monitor-total-item-bg"
              src="../../assets/img/monitor-item-bg.png"
              :alt="item.title"
            />
          </div>
        </div>
      </div>
      <div class="description">
        上海植物园生物多样性综合观测站，由上海市生态环境局资助，上海市环境科学研究院与上海植物园联合建设。观测站聚焦超大城市高强度人为胁迫下生物多样性维持机制及其对生态系统服务的驱动效应，集成被动声学、图像识别及水-土-气自动化物联网传感技术，实现生物要素与环境因子的多维度协同观测与实时数据融合，解析生物多样性时空分异规律。
      </div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";

export default {
  name: "Monitor",
  components: {
    CardBox,
  },
  data() {
    return {
      activeType: null,
      monitorTotal: [
        {
          title: "物种观测设备",
          num: 27,
          unit: "台",
        },
        {
          title: "环境监测设备",
          num: 25,
          unit: "台",
        },
        {
          title: "固定样地",
          num: 20,
          unit: "个",
        }
      ],
      sampleData: [
        { type: 'broadleaf', label: '阔叶混交林', value: 6 },
        { type: 'evergreen-conifer', label: '常绿针叶林', value: 1 },
        { type: 'evergreen', label: '常绿阔叶林', value: 2 },
        { type: 'coniferous', label: '针阔混交林', value: 4 },
        { type: 'deciduous-conifer', label: '落叶针叶林', value: 2 },
        { type: 'deciduous', label: '落叶阔叶林', value: 4 },
        { type: 'bamboo', label: '竹林', value: 1 }
      ],
    };
  },
  computed: {
    maxSampleValue() {
      return Math.max(...this.sampleData.map(item => item.value)) + 1;
    }
  },
  methods: {
    getRadarPosition(index, total, radius) {
      const angle = (index / total) * Math.PI * 2 - Math.PI / 2;
      const x = 50 + Math.cos(angle) * radius * 40;
      const y = 50 + Math.sin(angle) * radius * 40;
      return {
        left: `${x}%`,
        top: `${y}%`
      };
    }
  }
};
</script>

<style lang="scss" scoped>

.content-container {
  height: 265px;
}
.description {
  font-size: 15px;
  line-height: 1.45;
  color: #fff;
  padding: 7px 18px;
  text-indent: 4ch;
  letter-spacing: 3px;
}
.monitor-total {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  padding: 13px 20px;
}

.monitor-total-item {
  flex: 1;
  text-align: center;
}
.monitor-total-item-icon {
  margin-right: 10px;
}
.monitor-total-item-content {
  position: relative;
}
.monitor-total-item-title {
  font-size: 16px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.8);
}
.monitor-total-item-bg {
  position: absolute;
  bottom: -30px;
  left: 24px;
  width: 68px;
  height: 35px;
}
.monitor-total-item-num {
  font-size: 28px;
  color: #fff;
  margin-bottom: 18px;
}
.monitor-total-item-num-unit {
  font-size: 12px;
  margin-left: 5px;
}
</style>